<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大文件上传方案1</title>
</head>
<body>
<input id="fileInput" type="file"/>
<button onclick="uploadFile()">Upload</button>

<script>
    // 定义每个分片的大小，这里设定为10MB
    const CHUNK_SIZE = 10 * 1024 * 1024;

    function uploadFile() {
        // 获取文件选择框
        const fileInput = document.getElementById('fileInput');
        // 获取用户选择的文件
        const file = fileInput.files[0];
        // 检查用户是否选择了文件
        if (!file) {
            alert('请选择一个文件');
            return;
        }
        // 计算文件需要被切割成多少分片
        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
        let chunkNumber = 0;

        // 定义上传分片的函数
        function uploadChunk() {
            console.log('本次请求：totalChunks=' + totalChunks + ", chunkNumber=" + chunkNumber);
            // 切割文件，获取当前分片
            const chunk = file.slice(chunkNumber * CHUNK_SIZE, (chunkNumber + 1) * CHUNK_SIZE);
            // 创建FormData对象，用于传输二进制数据
            const formData = new FormData();

            // 添加分片相关信息到FormData
            formData.append('file', chunk);
            formData.append('chunkNumber', chunkNumber);
            formData.append('totalChunks', totalChunks);
            formData.append('identifier', file.name);

            // 使用Fetch API发送POST请求
            const url1 = 'http://localhost:8888/memory/chunks';
            const url2 = 'http://localhost:8888/disk/chunks';
            const url = 'http://localhost:8888/minio1/chunks';
            fetch(url, {
                method: 'POST',
                body: formData
            }).then(data => {
                console.log("响应数据：" + data);
                // 继续上传下一个分片或处理上传完成的情况
                chunkNumber++;
                if (chunkNumber < totalChunks) {
                    uploadChunk();
                } else {
                    alert('文件上传成功');
                }
            }).catch(error => {
                console.error('文件上传失败', error);
            });
        }

        // 开始上传第一个分片
        uploadChunk();
    }
</script>
</body>
</html>